<include file="./APP/Home/View/Public/header.html" xmlns="http://www.w3.org/1999/html"/>
<style type="text/css">
	#logo {
		position: relative;
		width: 180px;
	}
	#logo a {
		position: absolute;
		bottom: 0;
		left: 200px;
	}
	#logo_img {
		width: 108px;
		height: 108px;
	}
	#logo-edit-btn {
		width: 108px;
		height: 30px;
		line-height: 30px;
		color: #FFF;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		left: 0;
		bottom: 0;
		cursor: pointer;
	}
	#logo_select {
		text-align: center;
	}
	#logo_select h1 {
		margin: 0 0 0 30px;
		text-align: left;
	}
	#logo_select > div {
		padding: 10px 30px;
	}
	#logo_select img {
		width: 310px;
	}
	#logo_select .preview_face {
		float: left;
		position: relative;
		width: 180px;
		height: 180px;
		overflow: hidden;
		margin-left: 10px;
	}
</style>
<div class="container">
	<div class="row"><h3>账号设置</h3></div>
	<div class="row">
		<div class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label control-label-required" for="alias">昵称</label>

				<div class="col-sm-4">
					<input class="form-control" type="text" id="alias" name="alias" value="{$userinfo.alias}" placeholder="昵称">
					<span class="help-block">仅用于周伯通社区，不会在简历上展示</span></div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label control-label-required" for="contact_phone">登录邮箱</label>

				<div class="col-sm-5">
					<p class="form-control-static">{$userinfo.username}</p>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label control-label-required" for="contact_phone">密码</label>

				<div class="col-sm-5">
					<p class="form-control-static">******&nbsp;
						<a href="{:U('PersonalSet/editPassword')}" class="text-primary">修改</a>
					</p>
				</div>
			</div>
		</div>
		<form class="form-horizontal" id="upload_logo_form" role="form" method="post" action="{:U('PersonalSet/uploadLogo')}" enctype="multipart/form-data">
			<div class="form-group">
				<label class="col-sm-2 control-label control-label-required" for="">社区头像</label>
				<div class="col-sm-5">
					<div id="logo">
						<!-- IE9 下需通过label 触发隐藏的文件选择，jquery.form.js才不会报错 -->
						<label style="display: block; margin-top: 5px;">
							<img id="logo_img" class="img-border" src="{$userinfo.photo}">
							<input id="logo_file" type="file" name="logo" accept="image/gif, image/jpeg, image/png" style="display:none;">

							<span id="logo-edit-btn" style="">修改</span>
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary btn-min-width-100" onclick="saveProfile();return false;">保存</button>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="container">
	<div class="modal" id="logo_select" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" onclick="cancelFaceSelect();"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
					<h4 class="modal-title">截取Logo</h4></div>
				<div class="modal-body">
					<div class="row">
						<div class="img"><img id="origin_face_img" src="" style="float:left;"></div>
						<div style="clear: left;"></div>
					</div>
					<form id="save_logo_form" method="post" action="{:U('PersonalSet/saveLogo')}">
						<input type="hidden" name="origin_image_name" value="" class="origin_image_name">
						<input type="hidden" name="x1" value="" id="x1">
						<input type="hidden" name="y1" value="" id="y1">
						<input type="hidden" name="x2" value="" id="x2">
						<input type="hidden" name="y2" value="" id="y2">
						<input type="hidden" name="w" value="" id="w">
						<input type="hidden" name="h" value="" id="h">
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" onclick="$(&#39;#save_logo_form&#39;).submit();return false;">保存</button>
					<button type="button" class="btn btn-default" onclick="cancelFaceSelect();">取消</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	seajs.use(['$', 'imgareaselect', 'form-ajax', 'bootstrap3.0', 'bootbox'], function ($) {
		//当上传图片时,检查文件大小 step_1
		$('#logo_file').change(function (event) {
			var maxSize = 2;    // MB
			// uploadLogo()后会重置<input type="file">, 所以这里要检查是否有文件被选中
			if ( !event.target.files || event.target.files.length > 0 ) {
				if ( this.files && this.files[0] && ( ( this.files[0].size || 0 ) > maxSize * 1024 * 1024 ) ) {
					alert("文件不能超过 " + maxSize + " MB");
					return;
				}
				uploadLogo();
			}
		});

		//上传图片 step_2
		function uploadLogo() {
			var $uploadButton = $("#logo-edit-btn"),
					uploadText = $uploadButton.html();
			$uploadButton.html('<i class="fa fa-circle-o-notch fa-spin"></i>上传中...').attr("disabled", "disabled");
			var options = {
				data : {'module' : 'photo_tmp'},
				success : function (text, status, xhr, form) {
					$('#logo_file').val('');
					$uploadButton.html(uploadText).removeAttr("disabled");
					var response = text;
					if ( response.status ) {
						// 修正iframe时弹窗的位置错误
						if ( window.top != window ) {
							$('.mfp-container').css('height', '40%');
						}

						$(".origin_image_name").val(response.info.savename);
						$("#origin_face_img").attr("src", response.info.path)
								.after('<div class="preview_face"><img id="preview_face_img" src="" /></div>');
						$("#preview_face_img").attr("src", response.info.path);

						var preview = function (img, selection) {
							var scaleX = 108 / (selection.width || 1);
							var scaleY = 108 / (selection.height || 1);
							var scale = response.info.width / 300; // 原图的实际尺寸 / 原图的展示尺寸

							$('#preview_face_img').css({
								width : Math.round(scaleX * 300) + 'px',
								height : Math.round(scaleY * 300 * response.info.height / response.info.width) + 'px',
								marginLeft : '-' + Math.round(scaleX * selection.x1) + 'px',
								marginTop : '-' + Math.round(scaleY * selection.y1) + 'px'
							});

							$('#x1').val(selection.x1 * scale);
							$('#y1').val(selection.y1 * scale);
							$('#x2').val(selection.x2 * scale);
							$('#y2').val(selection.y2 * scale);
							$('#w').val(selection.width * scale);
							$('#h').val(selection.height * scale);
						}

						var scale = 310 / response.info.width; // 左侧缩略图的缩放比例
						var initSelectionSize = Math.min(response.info.height, response.info.width) * scale - 10;
						$("#logo_select").modal("show");
						$('#origin_face_img').imgAreaSelect({
							aspectRatio : '1:1',
							handles : true,
							x1 : 10,
							y1 : 10,
							x2 : initSelectionSize,
							y2 : initSelectionSize,
							onInit : preview,
							onSelectChange : preview
						});
					} else {
						alert(response.state);
					}
					$("#upload_logo_form")[0].reset();
				}
			};
			$("#upload_logo_form").ajaxSubmit(options);
		}

		//保存截取后的log step_3
		$('#save_logo_form').ajaxForm({
			beforeSubmit : function (form_data, $form, options) {
				$("#logo_select .btn").attr("disabled", "disabled");
				return true;
			},
			success : function (txt) {
				$("#logo_select .btn").removeAttr("disabled");

				var response = txt;
				if ( response.status ) {
					$("#logo_select .btn").removeAttr("disabled");
					$("#empty_logo_url").attr("checked", false);
					$("#empty_logo_file").hide();

					$('#origin_face_img').imgAreaSelect({
						remove : true
					});
					$('#origin_face_img + div').remove();
					$("#logo_select").modal("hide");

					$('#logo_img').attr('src', response.info);
					$('#logo_url').val(response.info);
					$("#logo-edit-btn").html("修改");
				} else {
					alert(response.info);
				}
			}
		});

		$('button.cancel').click(function () {
			$('#origin_face_img').imgAreaSelect({
				remove : true
			});
			$('#origin_face_img + div').remove();
			$("#logo_select").modal("hide");
		})

		$("button#submit-btn").click(function () {
			var ajaxFrom = $('#basic_form');
			$.ajax({
				url : ajaxFrom.attr('action'),
				type : ajaxFrom.attr('method'),
				data : ajaxFrom.serialize(),
				success : function (data) {
					if ( data.status > 0 && data.url ) {
						bootbox.alert(data.info, function () {
							window.location.href = data.url;
							return false;
						});

					} else {
						bootbox.alert({
							message : data.info,
							title : "提示信息"
						});
						return false;
					}
				}
			})
			return false;
		});
	})
</script>
<include file="./APP/Home/View/Public/footer.html"/>